<template>
  <div>
    <div
      v-for="(item, index) in sections"
      :key="index"
      style="margin-bottom: 20px"
    >
      <el-card>
        <template #header>
          <div style="text-align: right">
            <el-button
              type="danger"
              @click="deleteSection(index)"
              style="margin-right: 10px"
              >删除</el-button
            >
          </div>
        </template>
        <quest-section v-model="sections[index]" />
      </el-card>
    </div>
    <el-button @click="addSection('radio')">增加一个单项选择</el-button>
    <el-button @click="addSection('checkBox')">增加一个多项选择</el-button>
    <el-button @click="addSection('input')">增加一个文字输入</el-button>
    <el-button @click="commit()">提交</el-button>
    {{ sections }}
  </div>
</template>

<script setup>
import questSection from "./components/quest-section.vue";
import * as api from "@/api/feedback/feedback";
import { useRouter } from "vue-router";
const router = useRouter();
const Data = reactive({
  resourcesUrl: import.meta.env.VITE_APP_RESOURCES_URL,
  sections: [],
  postData: {
    title: "",
    description: "",
    content: "",
    startTime: null,
    endTime: null,
  },
});
const { resourcesUrl, sections, postData } = toRefs(Data);

const init = () => {
  console.log("init");
};
// 删除一个section
function deleteSection(index) {
  sections.value.splice(index, 1);
}
// 增加一个section
function addSection(type) {
  sections.value.push({
    sectionType: type,
  });
}
function commit() {
  api
    .addQuest({ ...Data.postData, content: JSON.stringify(Data.sections) })
    .then((res) => {
      ElMessage.success("添加成功");
      router.push({
        path: "/feedback/quest",
      });
    })
    .catch((err) => {
      ElMessage.error(err);
    });
}
onMounted(() => {
  init();
});
</script>

<style scoped>
.page-number {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
</style>
